<template>
    <IContent v-model="componentProps" :loading="loading">
        <ISearch v-model="search">
            <FormItem :label-width="1">
                <ButtonGroup>
                    <Button type="primary" icon="ios-search" size="small" @click="getLists(1)">搜索</Button>
                    <Button type="success" icon="ios-add" size="small" @click="openComponent(`ICreate`)">添加</Button>
                </ButtonGroup>
            </FormItem>
        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange"
                :loading="loading">
            <template slot-scope="{ row, index }" slot="district">
                <RemoteSpan url="common/select/port" v-model="row.district"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="type">
                <RemoteSpan url="common/select/dictionaries/ENTRY_CODE" :value="row.type"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="transport">
                <RemoteSpan url="common/select/transport" v-model="row.transport"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="piece">
                <span>{{row.piece}}</span>
                <RemoteSpan url="common/select/packing" v-model="row.packing"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="price">
                <span>{{row.price.toLocaleString()}} RMB</span>
            </template>
            <template slot-scope="{ row, index }" slot="weight">
                <span>{{row.weight.toLocaleString()}} KG</span>
            </template>
            <template slot-scope="{ row, index }" slot="product_count">
                <span>{{row.product_count.toLocaleString()}} 个</span>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <RemoteSpan url="common/select/dictionaries/RECEIVING_STATUS" :value="row.status"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button v-if="row.status === 0 || row.status === 2" size="small"
                        @click="openComponent('IUpdate', {id: row.id})">编辑
                </Button>
                <Button v-if="row.status === 0" size="small" @click="submitForDestroy(row.id)">删除</Button>
                <Button v-if="row.status === 0" size="small" @click="submitForConfirm(row.id)">确认</Button>
                <Button v-if="row.status !== 0" size="small" @click="openComponent('IIIView', {id: row.id})">查看</Button>
            </template>
        </ITable>
        <component slot="component" v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import IContent from "../../../../components/layout/IContent";
    import IContentMixins from "../../../../mixins/iContentMixins";
    import ISearch from "../../../../components/layout/ISearch";
    import ITable from "../../../../components/layout/ITable";
    import RemoteSpan from "../../../../components/layout/RemoteSpan";
    import RemoteSelect from "../../../../components/form/remoteSelect";
    import ICreate from './create';
    import IUpdate from './update';
    import IIIView from "./view";

    export default {
        name: "index",
        components: {IIIView, RemoteSelect, RemoteSpan, ITable, ISearch, IContent, ICreate, IUpdate},
        mixins: [IContentMixins],
        data() {
            return {
                table: {
                    columns: [{
                        title: '入库单号',
                        key: 'code'
                    }, {
                        title: '入境关区',
                        slot: 'district'
                    }, {
                        title: '进境类型',
                        slot: 'type'
                    }, {
                        title: '运输方式',
                        slot: 'transport'
                    }, {
                        title: '货物总价值',
                        slot: 'price'
                    }, {
                        title: '货物重量',
                        slot: 'weight'
                    }, {
                        title: '货物件数',
                        slot: 'piece'
                    }, {
                        title: '产品个数',
                        slot: 'product_count'
                    }, {
                        title: '状态',
                        slot: 'status'
                    }, {
                        title: '创建时间',
                        key: 'created_at',
                        width: 150
                    },
                        {
                            title: '操作',
                            slot: 'action',
                            width: 200
                        }]
                },
            }
        },
        methods: {
            getLists(page) {
                this._lists(`warehouse/receiving`, page);
            },
            submitForConfirm(id) {
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.put(`warehouse/receiving/${id}/confirm`).then((res) => {
                        this.getLists();
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
            submitForDestroy(id) {
                this._confirm().then(() => {
                    this.loading = true;
                    this.$http.delete(`warehouse/receiving/${id}`).then((res) => {
                        this.getLists();
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
